<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>菜单</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=no" />-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<link rel="stylesheet" type="text/css" href="../kitchensink/icons.synergy.css" /> 
<link rel="stylesheet"  type="text/css" href="../kitchensink/jq.ui.synergy.css" title="frosty"/>
<link rel="stylesheet"  type="text/css" href="../kitchensink/ui.synergy.css" title="frosty"/>

<!-- uncomment for AppMobi apps
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 	
-->
<script type="text/javascript" charset="utf-8" src="../jq.mobi.js"></script> 
<!-- include touch.js on desktop browsers only -->
<script>
function loadedPanel(what){
    //We are going to set the badge as the number of li elements inside the target
	//$.ui.updateBadge("#jqmlink",$("#jqm").find("li").length);
}
function unloadedPanel(what){
	console.log("unloaded "+what.id);
}
if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="../touch.js";
var tag=$("head").append(script);
$.os.android=true; //let's make it run like an android device
$.os.desktop=true;
}
//$.ui.backButtonText = 'B';
</script>

<script type="text/javascript" charset="utf-8" src="../ui/jq.ui.js"></script> 
<script type="text/javascript" charset="utf-8" src="../plugins/jq.drawer.js"></script> 
<script type="text/javascript" charset="utf-8" src="../plugins/mawScroller.js"></script>
<script type="text/javascript" charset="utf-8" src="../synergy/js/jq.ui.dialog.js"></script> 
<script type="text/javascript">
    /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="../kitchensink/";
	$.ui.isAjaxApp=true;// Must be set before $.ui.launch is executed
	$.ui.autoLaunch=true;
    $.ui.openLinksNewTab=true;
	//$.ui.loadDefaultHash=true; //Never load based off the hash/url
    var init = function(){
	  // $.ui.backButtonText="Back";  
	   window.setTimeout(function(){$.ui.launch();},1000);
       //$.ui.removeFooterMenu(); This would remove the bottom nav menu
    };
    document.addEventListener("DOMContentLoaded",init,false);  
	$.ui.ready(function(){
		console.log('ready');
		$.ui.showBackbutton=true;
		$.ui.setBackButtonStyle('icon back');
		$.ui.setBackButtonText('&nbsp;');
	});
   
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
	
	document.addEventListener('touchmove', preventDefaultScroll, false);

    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"kitchensink/";
	    //hide splash screen
	    //AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
	function showHide(obj,objToHide){
		var el=$("#"+objToHide)[0];
		
		if(obj.className=="expanded"){
			obj.className="collapsed";
		}
		else{
			obj.className="expanded";
		}
		$(el).toggle();
		
	}
	
</script>
</head>
<body>
<div id="jQUi">
<!-- this is the splashscreen you see. -->

<div id="content">
	<div title='Welcome' id="main" class="panel" selected="true" data-load="loadedPanel" data-unload="unloadedPanel" data-tab="navbar_home">
		<div style='width:96%; margin:2%'>
		<h5 class='expanded' onclick='showHide(this,"main_info");' ><span></span>销售机会</h5>
		<ul id='main_info' >
		 <li class=''><a href="#jqm">对话框（首页）</a></li>
         <li><a href="#webdrawer" data-refresh-ajax="true" >抽屉控件（首页）</a></li>
         <li><a href="NewDiv.html" data-refresh-ajax="true" >动态添加Div</a></li>
         <li><a href="ul.html" data-refresh-ajax="true" data-transition='pop' title="用户列表">用户列表(通信录)</a></li>
         <li><a href="ul.html" data-refresh-ajax="true" data-transition='pop' data-dialog='true' onconfirm="alert('sleeping');">对话框(外连接)</a></li>
		</ul>
        </div>
	</div>

	<!-- ------------------------------------------ -->
	
	<div id="jqm" class="panel" data-header="testheader" dialog="true" >
        <h2 class='expanded' onclick='showHide(this,"main_info1");' ><span></span>销售机会</h2>
		<ul id='main_info1' >
		 <li class=''><a href="#jqm">对话框（首页）</a></li>
         <li><a href="#webdrawer" data-refresh-ajax="true" >抽屉控件（首页）</a></li>
         <li><a href="NewDiv.html" data-refresh-ajax="true" >动态添加Div</a></li>
         <li><a href="ul.html" data-refresh-ajax="true" data-transition='pop' >用户列表(通信录)</a></li>
         <li><a href="ul.html" data-refresh-ajax="true" data-transition='pop' data-dialog='true' onconfirm="alert('sleeping');">对话框(外连接)</a></li>
		</ul>
        </div>
	</div>

    
	<!-- jqPlugins > jQ.drawer -->
	<div title="Drawer" class="panel" id="webdrawer" scrolling="no">

	<div style="position:absolute;bottom:15px;width:100%;z-index:101">
			<div id="drawer_2" style="z-index:1;position:relative;top:105px;height:180px;width:100%;">
<!--		
<div class="drawer_handle" style="height:30px;width:100%;background:orange;line-height:30px;text-align:center;font-size:14px;color:black;">PULL UP</div>
-->
			
			<div class="navbar drawer_handle" style="height:30px;width:100%;"><span></span></div>
          
        <div class="navbody">
        	<div id="hscroller_nav" style="width:800px;overflow-x:hidden;height:inherit">
        		<ul>
            	<li><p class="img_newflow"></p><p class="navh">新建流程</p></li>
                <li><p class="img_dailyround"></p><p class="navh">日常事务</p></li>
                <li><p class="img_sales"></p><p class="navh">销售管理</p></li>
                <li><p class="img_notebook"></p><p class="navh">通讯录</p></li>
                <li style="display:none;"><p class="img_knowledge"></p><p class="navh">知识管理</p></li>
                <li style="display:none;"><p class="img_hr"></span><p class="navh">人力资源</p></li>
            </ul>
          </div>
        </div>
			</div>
		</div>
		
		<script>
			window.addEventListener("load",function(){
				$("#drawer_2").drawer({direction:"up"});
				$.ui.setBackButtonStyle('icon back');
				$.ui.backButtonText = '&nbsp;';
				
				var hoptions = {
			  	verticalScroll:false,
			  	horizontalScroll:true,
			  	scrollBars:true
			   
			  };

				$.ui.scrollingDivs["hscroller_nav"] = $("#hscroller_nav").scroller(hoptions);
	 			$("#hscroller_nav").fixHScroll();
			},false);
			
        </script>

	</div>
 




</div>
<!-- ------------------------------------------ -->
<!-- navbar -->
<!-- navbar -->
<div id="navbar" style='margin: 0;float:left;'>
    <a href="#main" id='navbar_ui' class='icon search' ></a>
    <a href="#jqm" id='navbar_js' class="icon new_add" ></a>
    <a href="#jqmui" id='navbar_home'  class="icon home" ></a>
	<a href="#jqmweb" id='navbar_plugins'  class="icon set" ></a>
</div>	

<header id="testheader">
    <a id="backButton" onclick="$.ui.goBack()" style='display:block;left:0px;left:auto;overflow:hidden'></a>
    <h1>Custom Header</h1>
</header>
<!-- ------------------------------------------ -->

</div>
</body>
</html>
